<template>
    <div class='member'>
        <div class="container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" class="search-con">
                <el-form-item>
                    <div class="group">
                        <div class="btn" v-for="item,index in btnList" :key="index" @click="changeTab(index)" :class="{'active':curLine==index}">{{item.dictLabel}}</div>
                    </div>
                </el-form-item>
                <el-form-item label="" prop="key_range">
                    <el-date-picker v-model="queryParams.key_range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['customer:manage:export']">导出
                    </el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight :height="tableList &&tableList.length > 0 ? '900px' : '120px'">
                <el-table-column label="排行" align="center" prop="mobile" />
                <el-table-column label="会员名" align="center" prop="mobile" />
                <el-table-column label="订单数(单位:个)" align="center" prop="mobile" />
                <el-table-column label="购物金额" align="center" prop="mobile" />
            </el-table>
            <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'member',
    components: {

    },
    data() {
        return {
            showSearch: true,
            loading: false,
            total: 0,
            pageCount: 0,
            queryParams: {
                page: 1,
                limit: 20,
                key_name: null,
            },
            tableList: [
                {}
            ],
            btnList: [
                {
                    dictLabel: '全部',
                    dictValue: 0
                },
                {
                    dictLabel: '最近30天',
                    dictValue: 1
                },
                {
                    dictLabel: '最近90天',
                    dictValue: 2
                },
            ],
            curLine: 0,
        }
    },
    created() {

    },
    methods: {
        getList() {
            // this.loading = true;
            // getHospLists(this.queryParams).then(res => {
            //     this.tableList = res.data ? res.data.lists : [];
            //     this.pageCount = res.data.pageCount;
            //     this.loading = false;
            // });
        },
        changeTab(index) {
            this.curLine = index
            this.getList()
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
    },
}

</script>
<style scoped lang='scss'>
.group {
    display: flex;
    .btn {
        width: 87px;
        height: 29px;
        border: 1px solid rgba(204, 204, 204, 1);
        text-align: center;
        line-height: 29px;
        color: #657180;
        font-size: 12px;
        cursor: pointer;
        &.active {
            background: #1abc9c;
            color: #ffffff;
        }
    }
    .btn:nth-child(1) {
        border-radius: 3px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .btn:nth-child(2) {
        border-left: 0;
        border-right: 0;
    }
    .btn:nth-child(3) {
        border-radius: 3px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
}
</style>